<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-l">
            <el-form-item label="名称：">
                <el-input v-model="keywordName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="styleType" placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待提交" value="0"></el-option>
                    <el-option label="待审核" value="1"></el-option>
                    <el-option label="已通过" value="2"></el-option>
                    <el-option label="已驳回" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button class="reset" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="companyName" label="名称"></el-table-column>
                <el-table-column prop="auditStatus" label="状态" :formatter="formatter"></el-table-column>
                <el-table-column prop="user.name" label="联系人"></el-table-column>
                <el-table-column prop="user.phone" label="联系电话"></el-table-column>
                <el-table-column prop="companyAddress" label="地址"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.auditStatus == 1" @click="byOrderData = scope.row,outerVisible = true" type="text" size="medium" class="button-my-test">审核</el-button>
                        <!-- <el-button v-if="scope.row.auditStatus == 1" @click="confirm(scope.row),rejected.id=scope.row.id" type="text" size="medium" class="button-my-test">通过</el-button>
                        <el-button v-if="scope.row.auditStatus == 1" @click="centerDialogVisible = true,rejected.id=scope.row.id" type="text" size="medium" class="button-my-test">驳回</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog title="驳回" class="rejected" :visible.sync="centerDialogVisible" width="30%" center>
            <el-form ref="form" :model="rejected" label-width="80px">
                <el-form-item label="请输入">
                    <el-input type="textarea" placeholder="驳回原因..." v-model="rejected.reason"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="centerDialogVisible = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="centerDialogVisible = false,handleClick()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="详情" :visible.sync="outerVisible">
            <ul class="shenhe-ul" v-if="JSON.stringify(byOrderData) != '{}'">
                <li>公司全称：{{byOrderData.companyName}}</li>
                <li>联系人：{{byOrderData.user.sex == 0 ? '女' : '男'}}</li>
                <li>税务编号：{{byOrderData.taxNumber}}</li>
                <li>联系人手机号码：{{byOrderData.user.phone}}</li>
                <li>企业类型：{{byOrderData.companyCategory}}</li>
                <li>开户银行名：{{byOrderData.bankName}}</li>
                <li>纳税人识别号：{{byOrderData.taxpayerNumber}}</li>
                <li>开户银行账号：{{byOrderData.bankAccount}}</li>
                <li>公司地址：{{byOrderData.companyAddress}}</li>
                <li>固定电话：{{byOrderData.telephone}}</li>
                <li>状态：{{byOrderData.auditStatus| auditStatusFiler}}</li>
                <li style="color:red;" v-if="byOrderData.auditStatus == 3">驳回原因：{{byOrderData.rejectReason}}</li>
            </ul>
            <div slot="footer" class="dialog-footer" v-if="JSON.stringify(byOrderData) != '{}'">
                <el-button type="primary" @click="confirm(),rejected.id = byOrderData.id">通过</el-button>
                <el-button type="primary" @click="rejected.id = byOrderData.id,centerDialogVisible = true">驳回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            keywordName:'',
            styleType:'',
            formInline: {
                conditions:[],
                pageable:{
                    current:1,
                    size:10
                },
            },
            tableData:[],
            centerDialogVisible:false,
            outerVisible:false,
            byOrderData:{},
            rejected:{
                id:'',
                reject:'',
                reason:''
            },
            total:0
        }
    },
    filters:{
        auditStatusFiler(val){
            if(val == 0){
                return '待提交'
            }else if(val == 1){
                return '待审核' 
            }else if(val == 2){
                return '已通过'
            }else{
                return '已驳回'
            }
        }
    },
    mounted(){
        this.pageInfo()
    },
    methods:{
        // 重置搜索内容
        reset(){
            this.keywordName = ''
            this.styleType = ''
            this.pageInfo()
        },
        // 状态
        formatter(row){
            if(row.auditStatus == 0){
                return '待提交'
            }else if(row.auditStatus == 1){
                return '待审核'
            }else if(row.auditStatus == 2){
                return '已通过'
            }else{
                return '已驳回'
            }
        },
        // 获取列表
        pageInfo(){
            apiHttp.apiIndex.page(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                    this.formInline.conditions = []
                }
            })
        },
        // 翻页
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.pageInfo()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.pageInfo()
        },
        // 搜索
        onSubmit(){
            if(this.keywordName){
                this.formInline.conditions.push({
                    expression:'=',
                    column:'companyName',
                    value:this.keywordName
                })
            }
            if(this.styleType){
                this.formInline.conditions.push({
                    expression:'=',
                    column:'auditStatus',
                    value:this.styleType
                })
            }
            this.pageInfo()
        },
        // 驳回
        handleClick() {
            this.rejected.reject = false
            apiHttp.apiIndex.governmentBh(this.rejected).then(resp=>{
                if(resp.code == 0){
                    this.pageInfo()
                    this.$message({
                        type: 'success',
                        message: '驳回成功!'
                    });
                    this.outerVisible = false
                }
            })
        },
        // 通过
        confirm() {
            this.$confirm('确认通过?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center:'true'
            }).then(() => {
                this.rejected.reject = true
                apiHttp.apiIndex.governmentBh(this.rejected).then(resp=>{
                    if(resp.code == 0){
                        this.$message({
                            type: 'success',
                            message: '通过!'
                        })
                        this.outerVisible = false
                        this.pageInfo()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
      }
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 10px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        
    }
}
.shenhe-ul{
    text-align: left;
    li{
        padding: 0 20px;
        line-height: 35px;
        color: #000;
        display: inline-block;
        width: 28%;
        img{
            width: 50px;
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

